<template>
  <div>
    <el-divider>选项</el-divider>
    <div>
      <draggable
        :animation="340"
        :list="activeData.goodsList"
        group="selectItem"
        handle=".option-drag"
      >
        <div
          v-for="(item, index) in activeData.goodsList"
          :key="index"
          class="select-item"
        >
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <el-input
            v-model="item.goodsName"
            placeholder="商品名称"
            size="small"
          />
          <div
            class=" select-line-icon"
            @click="handleSettingGoods(item, index)"
          >
            <i class="el-icon-s-tools" />
          </div>
          <div
            class="close-btn select-line-icon"
            @click="activeData.goodsList.splice(index, 1)"
          >
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <div style="margin-left: 20px;margin-bottom: 10px">
        <el-button
          icon="el-icon-circle-plus-outline"
          style="padding-bottom: 0"
          type="text"
          @click="addGoodsItem"
        >
          添加商品
        </el-button>
      </div>
    </div>
    <el-dialog title="商品信息" :visible.sync="dialogVisible">
      <el-form :model="selectGoods" label-position="left" label-width="80px">
        <el-form-item label="商品图片">
          <el-upload
            :action="getUploadUrl"
            :headers="getUploadHeader"
            :on-success="handleUploadSuccess"
            :on-progress="uploadProgressHandle"
            list-type="picture-card"
            :file-list="selectGoods.imgList"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="selectGoods.goodsName" />
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="selectGoods.description" />
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number v-model="selectGoods.price" :precision="2" />
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input-number v-model="selectGoods.inventory" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="handleSaveGoodsSetting">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import mixin from "./mixin"
import {jsonSimpleClone} from "../../../utils"
import _ from "lodash"

export default {
  name: 'ConfigItemGoodsSelect',
  components: {
    draggable
  },
  mixins: [mixin],
  props: ['activeData'],
  data() {
    return {
      dialogVisible: false,
      selectGoodsIndex: 0,
      selectGoods: {}

    }
  },
  methods: {
    addGoodsItem() {
      this.activeData.goodsList.push({
        id: new Date().getTime(),
        imgList: [],
        goodsName: "商品1",
        description: "",
        price: 100,
        count: 1,
        inventory: 100
      })
    },
    handleSettingGoods(goods, index) {
      this.selectGoodsIndex = index
      this.dialogVisible = true
      this.selectGoods = JSON.parse(JSON.stringify(goods))
    },
    handleUploadSuccess(response) {
      this.selectGoods.imgList.push({url: response.data})
      this.closeUploadProgressHandle()
    },
    handleRemove(file, fileList) {
      _.remove(this.selectGoods.imgList, function (item) {
        return item.url === file.url
      })
    },
    handleSaveGoodsSetting() {
      this.$set(this.activeData.goodsList, this.selectGoodsIndex, this.selectGoods)
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  align-items: center;

  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }

  & .el-input + .el-input {
    margin-left: 4px;
  }
}

.select-item + .select-item {
  margin-top: 4px;
}

.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}

.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
  cursor: pointer;
}

.option-drag {
  cursor: move;
}
</style>
